<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <link rel="stylesheet" href="https://libs.cdnjs.net/twitter-bootstrap/1.4.0/css/bootstrap.css" />

</head>
<body>
<div id="app">
    <p>{{msg | myFilter | replaceMan('cat', 'dog')}}</p>
</div>

<div id="app2">
    <p> {{msg | myFilter}} </p>
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>
    // 过滤器定义方式, 定义一个全局过滤器, 所有vm(viewModel)共享
    Vue.filter('myFilter', function (data) {
        return data + " tom!";
    });

    var vm = new Vue({
        el: '#app',
        data: {
            msg:"hello"
        },
        methods: {

        },
        // 局部私有过滤器, 会覆盖全局过滤器
        filters: {
            myFilter(data) {
                return data + " local tom!";
            },
            // 过滤器的第一个参数就是管道传过来的数据，后面可以自定义其他参数
            replaceMan(data, arg1, arg2) {
                return data.replace(/tom/g, arg1) + " Give u a " + arg2
                    + " current minutes: " + new Date().getMinutes().toString().padStart(2, '0') + "分";
                // ES6 中string新增方法 padStart padEnd, 用于前后填补，第一个参数总位数，第二个填补内容
            }
        }
    });

    // 第二个vm实例
    var vm2 = new Vue({
        el: '#app2',
        data: {
            msg: "hello"
        }
    });
</script>
</body>
</html>
